<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form ref="formRef" :model="formData" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="formData.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="selectedAddress">
                <el-select v-model="formData.selectedAddress" placeholder="请选择活动区域">
                    <el-option label="安徽" value="安徽"></el-option>
                    <el-option label="湖北" value="湖北"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="重庆" value="重庆"></el-option>
                    <el-option label="西安" value="西安"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input v-model="formData.qq"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="Email">
                <el-input v-model="formData.Email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="dialogFormVisible=!dialogFormVisible">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>

export default {
    props:{
        // 6、至此，父组件某行数据已从tableData传入propData
        // 下一步需要将父组件传过来的回显数据显示在dialog表单上面
        //注意：type指定的是这个属性的类型  你指定的是对象  那么他的值就只能是个对象  你给的却是string  改一下 ok  对嘛  对象用{}
        propData:{
            default:{},
            type:Object
        },
    },
    data(){
        return {
          dialogFormVisible:false,
          dialogTitle:'',
          formData:{
                name:'',
                sex:'',
                age:null,
                selectedAddress:'',
                qq:'',
                Email:''
          } 
        } 
    },
    mounted(){

    },
    watch:{
        // 7、监听器监听到propData变化，就回显到表单上面
        propData: {
            handler: function (newpropData,oldpropData) {
                this.formData={...newpropData};
            },
        },
        dialogFormVisible:{
            handler: function (newval,oldval) {
                //你在这里监听的是false的时候，其实可以不判断的，不管是打开、还是关闭弹出窗的时候，都重置。
                    this.$refs.formRef.resetFields();
               
            },
        }
    },
    methods: {
        onSubmit:function(){
            // 2、点击立即创建按钮，需要将对话框子组件dialog的formData数据
            // 传到父组件PersonInformation的tableData，
            // 怎么传？-->this.$emit('触发的事件名'，抛出的事件)
            this.$emit('newinformation',this.formData);
            // 清空表单,这里应该放到前面
            // this.$refs.formRef.resetFields();
            // 3、关闭对话框
            this.dialogFormVisible=false;
        },
    }
}
</script>
